<!--引入thymeleaf模板-->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<div class="layui-col-sm12" id="myday">
    <header>
        <nav class="todo-nav layui-row">
            <ul class="edit">
                <li><a href="javascript:;" class="iconfont icon-leftarrow layui-col-sm1"></a></li>
                <li><a href="javascript:;" class="layui-col-sm1 layui-col-sm-offset10">完成</a>
                </li>
            </ul>
            <ul class="normal layui-row">
                <li>
                    <a href="" class="iconfont icon-leftarrow layui-col-sm1"></a>
                </li>
                <li><a href="" class="layui-col-sm1 layui-col-sm-offset9">主题</a></li>
                <li>
                    <a href="" class="iconfont icon-category layui-col-sm1"></a>
                </li>
            </ul>
        </nav>
        <div class="myday-title">
            <div>
                <h1>我的一天</h1>
                <p></p>
            </div>
        </div>
    </header>
    <section class="todo-bd">
        <ul class="undone">
            <li th:each="backlog:${session.onedaylogs}" th:if="${!backlog.state}">
                <i class="icon-default-template" th:attr="bid=${backlog.id}"></i>
                <p contenteditable="true" th:text="${backlog.content}">点击此处可编辑</p>
                <i class="icon-collection-fill important-color" th:if="${backlog.getImportant()}"
                   th:attr="bid=${backlog.id}"></i>
                <i class="icon-collection important-color" th:if="${!backlog.getImportant()}"
                   th:attr="bid=${backlog.id}"></i>
            </li>
        </ul>
        <ul class="finish">
            <h4 class="finish-title">
                已完成
            </h4>
            <li th:each="backlog:${session.onedaylogs}" th:if="${backlog.state}">
                <i class="icon-ashbin" th:attr="bid=${backlog.id}"></i>
                <p th:text="${backlog.content}">不可编辑</p>
                <i class="icon-return "></i>
            </li>
        </ul>
    </section>

    <div class="add">
        <i class="iconfont icon-add-select" th:attr="uid=${session.user.id}"></i>
        <input type="text" placeholder="添加任务" name="content">
    </div>
</div>
<script>
$(function (){
    //完成任务
    $('.todo-bd .undone li i:first-child').on('click', function () {
        let bid = $(this).attr("bid");
        $.post("completeLog", {id: bid}, function (data) {
            $("#myday").load("tooneday");
        });
    });

    //标记为重要
    $('.todo-bd .undone li i:last-child').on('click', function () {
        let bid = $(this).attr("bid");
        $.post("starLog", {id: bid});
    });

    //添加任务
    $('.add i').on('click', function () {

        let content = $(".add input[name=content]").val();
        let uid = $(this).attr("uid");
        $.post("addLog", {content: content, id: uid}, function (data) {
            $("#myday").load("tooneday");
        })
    });

    $('.add input').on({
        //获得焦点时样式变化并且上面可完成
        focus: function () {
            $(this).parent('.add').css({
                'width': '74%',
                'margin': '10px 17px 10px 0',
                'border-radius': '0'
            })
            $('.edit').css('display', 'block')
            $('.normal').css('display', 'none')
        },
        //失去焦点时样式变化并且上面为正常
        blur: function () {
            $(this).parent('.add').css({
                'width': '72%',
                'margin': '10px 2%',
                'border-radius': '10px'
            })
            $('.edit').css('display', 'none')
            $('.normal').css('display', 'block')
        }
    })

    let date = new Date()
    let month = date.getMonth()
    let day = date.getDate()
    let week = date.getDay()
    let weeks = ['日','一','二','三','四','五','六']
    for (let i = 0; i < weeks.length; i++) {
        if(i==week){
            week = weeks[i]
        }
    }
    $('.myday-title p').text((month+1)+'月'+day+'日  星期'+week)
});
    //点击添加为重要,完成等
    // $('.todo-bd').delegate('.undone li i:last-child', 'click', function () {
    //     $(this).toggleClass('icon-collection')
    //     $(this).toggleClass('icon-collection-fill')
    // })

    // $('.todo-bd').delegate('.undone li i:first-child', 'click', function () {
    //     $(this).parent('li').detach()
    //     $(this).removeClass('icon-default-template')
    //     $(this).addClass('icon-ashbin')
    //     $(this).siblings('i').removeClass('icon-collection-fill icon-collection important-color')
    //     $(this).siblings('i').addClass('icon-return')
    //     $(this).parent('li').appendTo('.finish')
    // })

    // $('.todo-bd').delegate('.finish li i:last-child', 'click', function () {
    //     $(this).parent('li').detach()
    //     $(this).removeClass('icon-return')
    //     $(this).addClass(' icon-collection important-color')
    //     $(this).siblings('i').removeClass('icon-ashbin')
    //     $(this).siblings('i').addClass('icon-default-template')
    //     $(this).parent('li').appendTo('.undone')
    // })
    // $('.todo-bd').delegate('.finish li i:first-child', 'click', function () {
    //     $(this).parent('li').remove()
    // })
</script>